<template>
	<view class="u-page">
		<view class="u-page__item">
			<text class="u-page__item__title" style="margin-top: 0;">主色调</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #3c9cff;"
				>
					<text class="u-page__item__color-box__item__title">Primary</text>
					<text class="u-page__item__color-box__item__value">#3c9cff</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #398ade;"
				>
					<text class="u-page__item__color-box__item__title">Dark</text>
					<text class="u-page__item__color-box__item__value">#398ade</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #9acafc;"
				>
					<text class="u-page__item__color-box__item__title">Disabled</text>
					<text class="u-page__item__color-box__item__value">#9acafc</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #ecf5ff;"
				>
					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
					<text class="u-page__item__color-box__item__value u-tips-color">#ecf5ff</text>
				</view>
			</view>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">Error</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f56c6c;"
				>
					<text class="u-page__item__color-box__item__title">Error</text>
					<text class="u-page__item__color-box__item__value">#f56c6c</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #e45656;"
				>
					<text class="u-page__item__color-box__item__title">Dark</text>
					<text class="u-page__item__color-box__item__value">#e45656</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f7b2b2;"
				>
					<text class="u-page__item__color-box__item__title">Disabled</text>
					<text class="u-page__item__color-box__item__value">#f7b2b2</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #fef0f0;"
				>
					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
					<text class="u-page__item__color-box__item__value u-tips-color">#fef0f0</text>
				</view>
			</view>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">Warning</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f9ae3d;"
				>
					<text class="u-page__item__color-box__item__title">Warning</text>
					<text class="u-page__item__color-box__item__value">#f9ae3d</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f1a532;"
				>
					<text class="u-page__item__color-box__item__title">Dark</text>
					<text class="u-page__item__color-box__item__value">#f1a532</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f9d39b;"
				>
					<text class="u-page__item__color-box__item__title">Disabled</text>
					<text class="u-page__item__color-box__item__value">#f9d39b</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #fdf6ec;"
				>
					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
					<text class="u-page__item__color-box__item__value u-tips-color">#fdf6ec</text>
				</view>
			</view>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">Info</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #909399;"
				>
					<text class="u-page__item__color-box__item__title">Info</text>
					<text class="u-page__item__color-box__item__value">#909399</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #767a82;"
				>
					<text class="u-page__item__color-box__item__title">Dark</text>
					<text class="u-page__item__color-box__item__value">#767a82</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #c4c6c9;"
				>
					<text class="u-page__item__color-box__item__title">Disabled</text>
					<text class="u-page__item__color-box__item__value">#c4c6c9</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f4f4f5;"
				>
					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
					<text class="u-page__item__color-box__item__value u-tips-color">#f4f4f5</text>
				</view>
			</view>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">Success</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #5ac725;"
				>
					<text class="u-page__item__color-box__item__title">Success</text>
					<text class="u-page__item__color-box__item__value">#5ac725</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #53c21d;"
				>
					<text class="u-page__item__color-box__item__title">Dark</text>
					<text class="u-page__item__color-box__item__value">#53c21d</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #a9e08f;"
				>
					<text class="u-page__item__color-box__item__title">Disabled</text>
					<text class="u-page__item__color-box__item__value">#a9e08f</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f5fff0;"
				>
					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
					<text class="u-page__item__color-box__item__value u-tips-color">#f5fff0</text>
				</view>
			</view>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">文字颜色</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #303133;"
				>
					<text class="u-page__item__color-box__item__title">主要文字</text>
					<text class="u-page__item__color-box__item__value">#303133</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #606266;"
				>
					<text class="u-page__item__color-box__item__title">常规文字</text>
					<text class="u-page__item__color-box__item__value">#606266</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #909399;"
				>
					<text class="u-page__item__color-box__item__title">次要文字</text>
					<text class="u-page__item__color-box__item__value">#909399</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #c0c4cc;"
				>
					<text class="u-page__item__color-box__item__title">占位文字</text>
					<text class="u-page__item__color-box__item__value">#c0c4cc</text>
				</view>
			</view>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">边框颜色</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #9a9998;"
				>
					<text class="u-page__item__color-box__item__title ">一级边框</text>
					<text class="u-page__item__color-box__item__value ">#9a9998</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #b4b3b1;"
				>
					<text class="u-page__item__color-box__item__title ">二级边框</text>
					<text class="u-page__item__color-box__item__value ">#b4b3b1</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #ceccca;"
				>
					<text class="u-page__item__color-box__item__title ">三级边框</text>
					<text class="u-page__item__color-box__item__value ">#ceccca</text>
				</view>
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #e7e6e4;"
				>
					<text class="u-page__item__color-box__item__title u-tips-color">四级边框</text>
					<text class="u-page__item__color-box__item__value u-tips-color">#e7e6e4</text>
				</view>
			</view>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">背景颜色</text>
			<view class="u-page__item__color-box">
				<view
				    class="u-page__item__color-box__item"
				    style="background-color: #f3f4f6;"
				>
					<text class="u-page__item__color-box__item__title u-tips-color">背景颜色</text>
					<text class="u-page__item__color-box__item__value u-tips-color">#f3f4f6</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.u-page {
		padding: 15px;

		&__item {

			&__title {
				font-size: 15px;
				color: $u-content-color;
				margin-top: 16px;
				margin-bottom: 4px;
			}

			&__color-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				&__item {
					width: 160rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 5px 0;
					border-radius: 3px;

					&__title {
						font-size: 13px;
						color: #fff;
					}

					&__value {
						font-size: 14px;
						color: #fff;
					}
				}
			}
		}
	}

	.u-tips-color {
		color: $u-tips-color;
	}
</style>
